import React from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { withRouter } from 'react-router-dom'
function HouseItem({
    houseCode,
    houseImg,
    title,
    desc,
    tags,
    price,
    history,
    style
}) {
    return (
        <div style={style} className={styles.house} onClick={() => history.push(`/detail/${houseCode}`)} >
            <div className={styles.imgWrap}>
                <img
                    className={styles.img}
                    src={`${process.env.REACT_APP_BASEURL}${houseImg}`}
                    alt=''
                />
            </div>
            <div className={styles.content}>
                <h3 className={styles.title}>{title}</h3>
                <div className={styles.desc}>{desc}</div>
                <div>
                    {tags.map((item, index) => {
                        const tagName = `tag${(index % 3) + 1}`
                        // console.log(index % 3)
                        return (
                            <span
                                key={item}
                                className={classNames(styles.tag, styles[tagName])}
                            >
                                {item}
                            </span>
                        )
                    })}
                </div>
                <div className={styles.price}>
                    <span className={styles.priceNum}>{price}</span> 元/月
                </div>
            </div>
        </div>
    )
}
export default withRouter(HouseItem)
